<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <script type="text/javascript" src="./js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="./js/jquery.jbiotool.js"></script>
    <script type="text/javascript">
      // store all models that have loaded
      var models={};
      $(function(){
	$('#commandArea').ajaxError(function(request,settings){
	  $('#informationArea').append('<h3>Error in get file</h3>');
	  $.jbiotool.setgetModelErr(request,settings);
	});
	$.get('getCommand.php',null,function(data){
          $('#commandArea').append(data);
        })
	$('.command').live('click',function(event){
    if(!models[$(this).attr('id')]){
	    $.jbiotool.getModel('./js/jbiotool/jquery.jbiotool.' + $(this).attr('id')+'.url.js');
	    //$.getScript('./js/jbiotool/jquery.jbiotool.' + $(this).attr('id')+'.url.js');
	    //alert('./js/models/jquery.models.' + $(this).attr('id')+'.js');
	   }else{
	    models[$(this).attr('id')].init();
	   }
	})
      });
    </script>
  </head>

  <body>
    <!--
      This Area include all useful model involved in the analysis, It's generation by server,autoload from server by cgi or html files. 
    -->
    <div id="commandArea">

    </div>
    <!--
      This Area used for user data input, any data that js model required and provided by user are come from this area
    -->
    <div id="inputArea">
      <h1>Input Area</h1>
    </div>
    <hr />
    <!--
      This Area is used for paremeter set required by the analysis models from commandArea. 
    -->
    <div id="parameterArea">
      <h1>paremeter set Area</h1>
    </div>
    <hr />
    <!--
      This Area is used for displaying result generate by analysis model
    -->
    <div id="resultArea">
      <h1>Result Area</h1>
    </div>
    <!--
      This Area give some information about the model.
    -->
    <hr />
    <div id="informationArea">
      <h1>Information Area</h1>
    </div>
  </body>

</html>
